<template>
    <div 
        class="move-x"
        ref="moveEle"
        @touchstart.stop ='moveStart($event)'
        @touchmove.stop ='moving($event)'
        @touchend.stop ='moveEnd($event)'>
        <!-- 这是移动端的左右滑动组件 -->
        <slot></slot>
    </div>
</template>

<script>
export default {
    name: 'moveX',
    data() {
        return {
            nowX: 0, // 元素的水平位置
            newX: 0, // 移动时的新水平位置
            startX: 0, // 移动开始的坐标
            startY: 0,
            moveX: 0, // 移动中的坐标
            moveY: 0, 
            distanceX: 0, // 移动的相对坐标
            distanceY: 0, 
            endX: 0, // 移动结束的坐标
            endY: 0,
            isMoving: false,
            active_dis : 20, // 移动超过10px，表示移动此方向
            isWASD : -1, // -1表示不确定方向 0：上 1：右 2：下 3：左 
            pageWid: 0, // 网页宽度 
            pageIndex: 0,
            pageNum: 0, //总页数
            touchSpeed: 1.2, // 元素移动速度相对手指的移动速度的倍率
            animateMoving: false, // 动画正在实现
            timer: null, // 动画计时器
        }
    },
    methods: {
        // 移动开始
        moveStart(e) {
            this.liftDefault();
            this.stopDefault();
            // 若动画正在移动，就直接退出函数
            if(this.animateMoving) {
                return;
            }
            // console.log('开始移动','x',e.targetTouches[0].pageX,'y',e.targetTouches[0].pageY);
            this.startX = e.targetTouches[0].pageX;
            this.startY = e.targetTouches[0].pageY;
            this.isMoving = true;
        },
        // 正在移动
        moving(e) {
            // 若动画正在移动，就直接退出函数
            if(this.animateMoving) {
                return;
            }
            // console.log('正在移动',this.isMoving);
            // console.log(e);
            this.moveX = e.changedTouches[0].pageX;
            this.moveY = e.changedTouches[0].pageY;
            // console.log('正在移动','x',this.moveX,'y',this.moveY);
            // console.log('正在移动',this.isWASD);
            this.distanceX = this.moveX - this.startX;
            this.distanceY = this.moveY - this.startY;
            // 移动方向还没确定
            if(this.isWASD == -1){
                // 上
                if(this.distanceY <= -0.5*this.active_dis){
                    this.isWASD = 0;
                    this.liftDefault();
                    this.isMoving = false;
                } 
                // 下
                else if(this.distanceY >= 0.5*this.active_dis){
                    this.isWASD = 2;
                    this.liftDefault();
                    this.isMoving = false;
                }
                // 左
                else if(this.distanceX <= -1*this.active_dis){
                    this.isWASD = 3;
                }
                // 右
                else if(this.distanceX >= 1*this.active_dis){
                    this.isWASD = 1;
                }
            }
            // 若确定左右移动
            if(this.isWASD == 3){
                this.newX = this.nowX + this.distanceX *this.touchSpeed;
                // 若移动超过半个屏幕，则暂停移动
                if(this.newX <= - (this.pageNum-1)* this.pageWid - this.pageWid /4){
                    this.newX = - (this.pageNum-1)* this.pageWid - this.pageWid /4;
                }
                if(this.newX >= this.pageWid /4){
                    this.newX = this.pageWid /4;
                }
                // 跟着手指移动
                this.setX(this.newX);
            }
            if(this.isWASD == 1){
                this.newX = this.nowX + this.distanceX *this.touchSpeed;
                // 若移动超过半个屏幕，则暂停移动
                if(this.newX <= - (this.pageNum-1)* this.pageWid - this.pageWid /4){
                    this.newX = - (this.pageNum-1)* this.pageWid - this.pageWid /4;
                }
                if(this.newX >= this.pageWid /4){
                    this.newX = this.pageWid /4;
                }
                // 跟着手指移动
                this.setX(this.newX);
            }
            // console.log('this.nowX',this.nowX);
        },
        // 移动结束
        moveEnd(e) {
            // 若动画正在移动，就直接退出函数
            if(this.animateMoving || !this.isMoving) {
                this.isWASD = -1;
                this.isMove = false;
                return;
            }
            // console.log('结束移动', this.animateMoving, this.isMoving, 
                        // 'this.nowX',this.nowX,'this.newX',this.newX);
            this.endX = e.changedTouches[0].pageX;
            this.endY = e.changedTouches[0].pageY;
            this.animateMoving = true; // 动画正在移动

            // 若确定左右移动, 则开始移动元素
            if(this.isWASD == 3){
                // 更新现在的元素位置
                this.nowX = this.newX;
                for(let i =0;i<this.pageNum;i++){
                    if(this.nowX > - i* this.pageWid - this.pageWid / 2){
                        this.newX = - i* this.pageWid;
                        this.pageIndex = i;
                        break;
                    }
                }
                if(this.nowX <= - (this.pageNum-1)* this.pageWid ){
                    this.newX = -(this.pageNum-1)*this.pageWid;
                    this.pageIndex = this.pageNum-1;
                }
            }
            if(this.isWASD == 1){
                // 更新现在的元素位置
                this.nowX = this.newX;
                for(let i =0;i<this.pageNum;i++){
                    if(this.nowX > - i* this.pageWid - this.pageWid / 2){
                        this.newX = - i* this.pageWid;
                        this.pageIndex = i;
                        break;
                    }
                }
                if(this.nowX <= - (this.pageNum-1)* this.pageWid ){
                    this.newX = -(this.pageNum-1)*this.pageWid;
                    this.pageIndex = this.pageNum-1;
                }
            }
            // 开始移动动画
            this.animateDoing(this.newX);
            // 移动结束重置状态
            // console.log('this.nowX',this.nowX);
            // console.log('this.pageIndex',this.pageIndex);
            this.isWASD = -1;
            this.isMove = false;
        },
        // 禁止页面上下滚动
        // 禁止的函数
        preventDef(e) {
            e.preventDefault()
        },
        stopDefault() {
            // console.log('锁定');
            document.body.addEventListener('touchmove', this.preventDef, {passive: false})
        },
        // 解禁页面上下滚动
        liftDefault() {
            // console.log('解除');
            document.body.removeEventListener('touchmove', this.preventDef)
        },
        // 获取网页宽度
        getWidth() {
            this.pageWid = document.body.clientWidth;
            // console.log('this.pageWid',this.pageWid);
        },
        // 动画函数
        animateDoing(position) {
            if(this.timer != null) {
                return;
            }
            this.timer = setInterval(()=>{
                let step = (position - this.nowX)/5;
                step = step < 0 ? Math.floor(step) : Math.ceil(step);
                this.nowX = this.nowX + step;
                if(Math.abs(this.nowX - position) <= 5){
                    this.nowX = position;
                    this.setX();
                    this.animateMoving = false;
                    this.liftDefault();
                    clearInterval(this.timer);
                    this.timer = null;
                    return ;
                }
                this.setX();
            },1)
        },
        // 设置父盒子的偏移量
        setX(newX) {
            if(newX == undefined){
                newX = this.nowX;
            }
            this.$refs.moveEle.style.transform= 'translateX('+ newX +'px)';
        },
        // 移动至此下标
        gotoIndex(i) {
            this.newX = - i* this.pageWid;
            this.pageIndex = i;
            // 开始移动动画
            this.animateDoing(this.newX);
        }
    },
    mounted() {
        this.getWidth();
        window.addEventListener('resize',this.getWidth);
        this.pageNum = this.$store.state.bStore.urls.length;
        this.gotoIndex(this.$store.state.bStore.activeIndex);
        // console.log('this.pageNum',this.pageNum);
    },
    computed: {
        activeIndex() {
            return this.$store.state.bStore.activeIndex;
        }
    },
    watch: {
        activeIndex(v) {
            // console.log(1);
            this.gotoIndex(v);
        },
        pageIndex(v) {
            // console.log(2);
            this.$store.commit('bStore/setActiveIndex',v);
        }
    },
    destroyed() {
        clearInterval(this.timer);
        window.removeEventListener('resize',this.getWidth);
        this.liftDefault();
    }
}
</script>

<style lang="scss" scoped>
.move-x {
    height: 100%;
}
</style>